import React from 'react'
import {getEuroPointReq} from "../../../apis/goApis";
import {log} from "../../../utils/commonfunc";

class Point extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            point: [],
        }
    }

    componentDidMount() {
        this.getPoint()
    }

    getPoint = () => {
        getEuroPointReq()
            .then(res => {
                const data = res.data
                log(data)
                if (data.ok === 1) {
                    const point = []
                    data.jifen.map(team => {
                         const group = team.Zu
                        if (point[group - 1]) {
                            point[group - 1].push(team)
                        } else {
                            point[group - 1] = [team,]
                        }
                    })
                    this.setState({
                        point,
                    })
                }
                // const point =
            })
    }

    renderGroupTable = (group, index) => {
        log(group)
        const letters = 'ABCDEFG'
        const header = <div className='euro-point-table-header flex-align-center mg-b-1px'>
            <div className='flex-1'>
                <span>
                    {letters[index]}组
                </span>
            </div>
            <div className='euro-point-table-right flex-1 flex-space-between-align-center mg-b-1px'>
                <span>
                    胜
                </span>
                <span>
                    平
                </span>
                <span>
                    负
                </span>
                <span>
                    净胜球
                </span>
                <span style={{color: '#213A4B'}}>
                    积分
                </span>
            </div>
        </div>

        const body = group
            .sort((a, b) => b.Jifen - a.Jifen)
            .map((team, index) => {
            log(team)
            return <div className='euro-point-table-body' key={index}>
                <div className='flex euro-point-table-row'>
                    <div className='flex-1 flex-align-center'>
                        <span className='mg-r-12px'>{index + 1}</span>
                        <img src={team.Img}
                             alt=''
                             style={{
                                 width: '30px',
                                 height: '30px',
                                 marginRight: '8px',
                             }}
                        />
                        <span style={{color: '#333'}}>{team.Name}</span>
                    </div>
                    <div className='flex-1 euro-point-table-right flex-space-between-align-center'>
                         <span>
                             {team.Sheng}
                         </span>
                        <span>
                            {team.Ping}
                         </span>
                        <span>
                            {team.Fu}
                         </span>
                        <span>
                            {team.Jingsheng}
                         </span>
                        <span style={{color: '#213A4B'}}>
                            {team.Jifen}
                         </span>
                    </div>
                </div>
            </div>
        })

        return <div className='euro-point-table mg-b-8px' key={index}>
            {header}
            {body}
        </div>
    }

    render() {
        const point = this.state.point
        return (
            <>
                <div className='euro-point-container'>
                    <div className='euro-point-header'>
                        <span>小组赛</span>
                    </div>
                    {point.map((group, index) => this.renderGroupTable(group, index))}

                </div>
            </>
        )
    }
}

export default Point